<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>器材分类</title>
    <link rel="stylesheet" href="../../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/cangKu/iconfont.css">
    <link rel="stylesheet" href="../../css/cangKuGuanLi/qiCaiFenLei.css">
    <script src="../../js/jquery-3.1.1.js"></script>
   <script src="../../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../js/allData.js"></script>



</head>

<body>

    <div class="container">
        <!-- 第一行文字 -->
        <div class="header">
            <h4>器材分类</h4>
            <button id="mybtn" type="button" class="btn" data-toggle="modal" data-target="#myModal">添加区域</button>
        </div>

        <table class="table">
            <thead id="thead">
             <tr>
               <th>分类名称</th>
               <th>器材数</th>
               <th>操作</th>
             </tr>
            </thead>
            <tbody id="tbody">
              <tr>
                <td>工具</td>
                <td>98</td>
                <td>
                 <button  class="btn_xiangxia" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                   <span class="iconfont icon-xiangxia" ></span></button>
                <button class="btn_tianjia"><span class="iconfont icon-tianjia"></span></button>
                   <button class="btn_shuxie"><span class="iconfont icon-shuxie"></span></button>
                   <button class="btn_shanchu"><span class="iconfont icon-shanchu"></span></button>    
                </td>
             
            </tbody>
           </table>




                    <!-- Button trigger modal -->
                    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">新增区域</h4>
                                </div>
                                <div class="modal-body">
                                    <p> <label for="">区域:</label>
                                        <input type="text" class="name" onfocus="this.placeholder=''"
                                            onblur="this.placeholder='请输入区域名称'">
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary">确定</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->

                    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <p>您确定要删除吗该条数据吗？</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                    <!-- 提示框 -->
                
                    <div class="tishikuang">
                        <i class="glyphicon glyphicon-ok"></i>
                        删除成功
                    </div>


                    <script>
                         let maxPage;
                         let thePage = 0;
                        let fenyeList = goodsFenleiList;
                        //该函数是 渲染table
                        //1.获取节点      
                        //data 依据数据去渲染html结构

                       
                        function showTable(data) {
                            // let mytbody = document.getElementById('mytbody')
                            //2.获取到节点之后，添加html结构    innerHTML
                            $('#tbody').html('');
                            $.each(data, (index, item) => {
                                $('#tbody').append(`
      <tr>
        <td>${item.name}</td>
        <td>${item.num}</td>
<td>
<button class="btn_xiangxia"><span class="iconfont icon-xiangxia"></span></button>
<button class="btn_tianjia"><span class="iconfont icon-tianjia"></span></button>
<button class="btn_shuxie"><span class="iconfont icon-shuxie"></span></button>
<button class="btn_shanchu del" data-id = '${item.name}' data-item = '${JSON.stringify(item)}'>
    <span class="iconfont icon-shanchu"></span></button>
</td>
</tr>  
`)
                            });


                        }
                        // 根据数据源渲染每一页的数据
                        function fenye(data, yema) {
                            let qishiye = (yema - 1) * 9;
                            let xuanranArr = data.slice(qishiye, qishiye + 9);
                            showTable(xuanranArr);

                            thePage = yema;

                            let num = $('.pageItem').text();
                            // console.log(num.length);
                            for (let i = 0; i < num.length; i++) {
                                $('.pageItem').eq(i).css({
                                    backgroundColor: '',
                                    color: '#969494'
                                })
                            }
                            $('.pageItem').eq(yema - 1).css({
                                backgroundColor: '#6554C0',
                                color: '#fff'
                            })
                        }

                        showTable(goodsFenleiList)
                        fenye(goodsFenleiList, 1)




                         // 根据页码渲染分页按钮
        function xuanranPage(data) {
            maxPage = Math.ceil(data.length / 9);
            $('#pageBox').html('')
            for (let i = 1; i <= maxPage; i++) {
                $('#pageBox').append(`
    <div class='pageItem'>${i}</div>
`)
            }
        }
        xuanranPage(goodsFenleiList)
        fenye(goodsFenleiList, 1)

        // 删除
        let num = []
        $('#tbody').on('click', '.del', function () {
            var data_item = JSON.parse($(this).attr('data-item'));
            var data_id = $(this).attr('data-id');
            $('#myModal').modal('toggle')
            num.push(data_id)
        })

        function del() {
            let time
            for (let i = 0; i < goodsFenleiList.length; i++) {
                if (goodsFenleiList[i].name == num[0]) {
                    goodsFenleiList.splice(i, 1);
                    num = [];
                    time = setInterval(() => {
                        $('.tishikuang').css({
                            position: 'absolute',
                            top: (size[0] - 100) / 2 + 'px',
                            left: (size[1] - 300) / 2 + 'px',
                            display: 'block'
                        })
                    }, 500);
                    break;
                }
            }
            $('#myModal').modal('hide')
            xuanranPage(goodsFenleiList);
            fenye(goodsFenleiList, thePage);
            setTimeout(() => {
                clearInterval(
                    time
                )
                $('.tishikuang').css({
                    display: 'none'
                })
            }, 1500);
        }
        // 查找
        let data
        $('.chaxun').click(function () {
            let startTime = $('.startTime').val();
            let endTime = $('.endTime').val();
            let date = $('.date').val();

            for (let i = 0; i < fenyeList.length; i++) {

                console.log(fenyeList[i].startTime);

            }

        })

  

        // 重置
        $('.chongzhi').click(function () {
            fenyeList = goodsFenleiList
            show(1)
        })


        show(1)

        function show(num) {
            xuanranPage(fenyeList);
            fenye(fenyeList, 1)
        }
        // 提示框
        let size = []
        function tishi() {
            let tishikuang = document.getElementsByClassName('tishikuang');
            let top = document.body.clientHeight
            let left = document.body.clientWidth
            size.push(top, left);
        }
        tishi()
        // console.log(size);
        $('.tishikuang').css({
            position: 'absolute',
            top: (size[0] - 100) / 2 + 'px',
            left: (size[1] - 100) / 2 + 'px',
            display: 'none'
        })


                    </script>
</body>

</html>